<template>
    <div class="personal" v-if="name">
        <page-title :title="name"></page-title>
        <h2 class="h2">{{name}}</h2>
        <div class="rich-ctx" v-html="description">
            <!-- 富文本编辑区域，自定义内容为HTML格式 -->
        </div>
        <br>
        <div class="cut-title">
            <b>填写表单</b>
        </div>
        <form action="" class="form">
            <div class="form-item" v-for="item in form" :key="item.rname">
                <span class="form-item-label">
                    <span class="must" v-if="item.val==1">*</span>
                    {{item.rname}}：
                </span>
                <input v-if="item.field === 'phone'" type="tel" v-model="item.value">
                <input v-else-if="item.field === 'email'" type="email" v-model="item.value">
                <input v-else type="text" v-model="item.value">
            </div>

            <!--1.文本 2.单选 3.复选 4.文本域 5.文件框 6.下拉框 7.超链 8.日期型 9.时间型 10.日期时间型-->
            <div class="form-item" v-for="(item,index) in contents" :key="index" v-if="item.visible_type!=2" :class="{'two-line':item.type==2|| item.type==3 || item.type==4}">
                <span class="form-item-label">
                    <span class="must" v-if="item.must_or_option==1">*</span>
                    {{item.name}}：
                </span>
                <input type="text" v-model="item.value" v-if="item.type==1">
                <!-- <checklist :options="item.remark" :max="1" v-model="item.value" v-if="item.type==2"></checklist> -->
                <radio :options="item.remark" v-model="item.value" v-if="item.type==2"></radio>
                <checklist :options="item.remark" v-model="item.value" v-if="item.type==3"></checklist>
                <x-textarea :max="100" :placeholder="'请输入你想说的话'" :rows="3" v-model="item.value" v-if="item.type==4"></x-textarea>
                <selector ref="defaultValueRef" placeholder="请选择" :options="item.remark" v-model="item.value" v-if="item.type==6"></selector>
                <input type="text" v-model="item.value" v-if="item.type==7">
                <datetime v-model="item.value" v-if="item.type==8"></datetime>
                <datetime v-model="item.value" format="HH:mm" v-if="item.type==9"></datetime>
                <datetime v-model="item.value" required format="YYYY-MM-DD HH:mm" v-if="item.type==10"></datetime>
            </div>
            <div class="aaa little-form">
                <x-switch class="bg-switch" :title="'是否有同行人员'" :value-map="[0, 1]" v-model="consForm.has_follower"></x-switch>
                <br v-if="consForm.has_follower==1">
                <div class="form-item" v-if="consForm.has_follower==1">
                    <span class="form-item-label">
                        <span class="must">*</span>同行者姓名：</span>
                    <input type="text" v-model="consForm.follower_name" :class="{'validate': vdPass}">
                </div>
                <div class="form-item" v-if="consForm.has_follower==1">
                    <span class="form-item-label">
                        <span class="must">*</span>同行者手机：</span>
                    <input type="tel" v-model="consForm.follower_phone">
                </div>
                <div class="form-item" v-if="consForm.has_follower==1">
                    <span class="form-item-label">
                        <span class="must">*</span>同行者单位：</span>
                    <input type="text" v-model="consForm.follower_company">
                </div>
            </div>
            <div class="aaa little-form">
                <x-switch class="bg-switch" :title="'是否有替代人员'" :value-map="[0, 1]" v-model="consForm.has_replacer"></x-switch>
                <br v-if="consForm.has_replacer==1">
                <div class="form-item" v-if="consForm.has_replacer==1">
                    <span class="form-item-label">
                        <span class="must">*</span>替代者姓名：</span>
                    <input type="text" v-model="consForm.replacer_name" :class="{'validate': vdPass}">
                </div>
                <div class="form-item" v-if="consForm.has_replacer==1">
                    <span class="form-item-label">
                        <span class="must">*</span>替代者手机：</span>
                    <input type="tel" v-model="consForm.replacer_phone">
                </div>
                <div class="form-item" v-if="consForm.has_replacer==1">
                    <span class="form-item-label">
                        <span class="must">*</span>替代者单位：</span>
                    <input type="text" v-model="consForm.replacer_company">
                </div>
            </div>
            <div class="form-item two-line">
                <span class="form-item-label">
                    备注：</span>
                <x-textarea :max="100" :placeholder="'请输入你想说的话'" :rows="3" v-model="consForm.remarks"></x-textarea>
            </div>
            <x-button class="ps-btn" :show-loading="showLoading" @click.native="submit" action-type="button" :disabled="check">确认报名</x-button>
        </form>
    </div>
</template>
<script>
import { Swiper, XButton, Datetime, XTextarea, Selector, Radio, Checklist, XSwitch, Group } from 'vux';
//用户
import { getApplicationById, saveApplicationReceipt } from "@/api/activity";
import { getEnterpriseInfo } from "@/api/enterprise";
// function abc(item) {
//     let obj = {}
//     obj[item.field] = item.value
//     return obj
// }
export default {
    data() {
        return {
            //微信openid
            openid: this.$route.query.openid,
            //企业id
            eid: this.$route.query.eid,
            //微信id
            wxid: this.$route.query.wxid,
            //活动Id   测试数据为10
            applicationId: this.$route.query.id,
            //分享者ID
            shareUserId: this.$route.query.shareUserId,
            gatherId: null,
            vdPass: true,
            //审核状态
            status: null,
            //提交的菊花
            showLoading: false,
            //用户信息
            form: [],
            name: null,
            contents: [],
            record: {},
            contentRecord: {},
            consForm: {
                has_follower: 0,
                follower_name: null,
                follower_phone: null,
                follower_company: null,
                has_replacer: 0,
                replacer_name: null,
                replacer_phone: null,
                replacer_company: null,
                remarks: null,
            },
            description: null,
            check: false,
            share_thumburl: '',
            share_remarks: '',
        }
    },
    components: {
        XButton,
        XSwitch,
        Group,
        Swiper,
        Datetime,
        XTextarea,
        Selector,
        Radio,
        Checklist,
    },
    methods: {
        submit() {
            let self = this
            let array = this.form
            for (var index = 0; index < array.length; index++) {
                if (array[index].val == 1 && (!array[index].value || (array[index].value == ""))) {
                    self.$vux.toast.text('请填写必填项')
                    this.record = null
                    return
                }
                this.record[array[index].field] = array[index].value
            }
            debugger
            let array1 = this.contents
            for (var index = 0; index < array1.length; index++) {
                if (array1[index].must_or_option == 1 && (!array1[index].value || (array1[index].value == ""))) {
                    self.$vux.toast.text('请填写必填项')
                    this.contentRecord = null
                    return
                }
                this.contentRecord[array1[index].name] = array1[index].value
            }
            this.$vux.confirm.show({
                title: '确认信息',
                content: '您已确认以上信息并且提交么？',
                onConfirm() {
                    self.showLoading = true
                    saveApplicationReceipt(self.applicationId, JSON.stringify(self.record), JSON.stringify(self.consForm), self.gatherId, JSON.stringify(self.contentRecord)).then(res => {
                        self.showLoading = false
                        if (res.state == "ok") {
                            self.$vux.toast.show('提交成功')
                        } else {
                            self.$vux.toast.show(res.msg)
                        }
                    }).catch((err) => {
                        self.showLoading = false
                        self.check = true
                    })
                }
            })
        }
    },
    created() {
        // this.$vux.loading.show('')
        // //根据openId和wxid查询用户信息
        getApplicationById(this.applicationId).then(async res => {
            if (res.application) {
                this.name = res.application.name
                this.description = res.application.description
                this.form = JSON.parse(res.application.fields)
                this.contents = JSON.parse(res.application.content)
                this.contents.forEach(item => item.remark = item.remark.split("\n"))
                this.gatherId = res.application.gather_id
                this.share_remarks = res.application.share_remarks
                this.share_thumburl = res.application.share_thumburl
                if (!this.share_thumburl) {
                    await getEnterpriseInfo().then(resp => {
                        this.share_thumburl = resp.enterprise.logo_1x1
                    });
                }
                this.wxShare(this.applicationId, this.shareUserId, this.name, this.share_remarks, this.share_thumburl, () => { }, 2)
                // 获取微信分享参数
            }
            // this.$vux.loading.hide()
        }).catch(_ => {
            // this.$vux.loading.hide()
        })
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.demo2-item {
  //   border: 1px solid #ececec;
  padding: 5px 15px;
}
.demo2-item-selected {
  border: 1px solid green;
}
.aaa {
  margin-bottom: 1.4rem;
}
</style>